<script setup>
import {defineEmits, onMounted, reactive, ref} from "vue";
import Color from "@/components/debris/Color.vue";
import Search from "@/components/debris/Search.vue";
import Sidepanel from "@/components/debris/Sidepanel.vue";
import Nav from "@/components/debris/Nav.vue";
import Branding from "@/components/debris/Branding.vue";
import {Storage} from "@/utils/Storage.ts";
import router from "@/router/index.js";
import {previewValue,searchTreeMenus} from '@/api/basal.js'
import {ResultEnums} from "@/enums/ResultStatusEnums.js";
const appHeaderDom = ref(null)
const appSidepanelCss = ref('sidepanel-visible')
/*适应小屏幕显示收缩按钮Dom元素*/
const colorCallBack = ref(null)
const searchCallBack = ref(null);
const emit = defineEmits(['innerLink'])
const photo = ref(null)
const menus = ref([])
onMounted(() => {
  loadPreviewValue().then(result => {
    photo.value = result
  })
  searchTreeMenus(import.meta.env.VITE_SYSTEM_CODE,'heard').then(result => {
    menus.value = result.code === ResultEnums.SUCCESS ? result.data : menus.value;
  })
})

async function loadPreviewValue() {
  const result = await previewValue(import.meta.env.VITE_SYSTEM_CODE,'user','PhotoUpload');
  return result.code === ResultEnums.SUCCESS? result.data : ''
}

/* 小屏遮罩层取消操作 */
function sidePanelDropClick() {
  colorCallBack.value.sidePanelDrop();
}
function sidePanelCloseCilck(e){
  e.preventDefault();
  colorCallBack.value.sidePanelDrop();
}

function responsiveSidePanel(){
  let w = window.innerWidth;
  if(w >= 1200) {
    // if larger
    // console.log('larger');
    appSidepanelCss.value = 'sidepanel-visible'
  } else {
    // if smaller
    // console.log('smaller');
    appSidepanelCss.value = 'sidepanel-hidden'
  }
}

const resetSidePanel = (visible) => {
  appSidepanelCss.value = visible?"sidepanel-visible":"sidepanel-hidden";
}

window.addEventListener('load', function(){
  responsiveSidePanel();
});

window.addEventListener('resize', function(){
  responsiveSidePanel();
});

/* ===== Enable Bootstrap Popover (on element  ====== */
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

/* ==== Enable Bootstrap Alert ====== */
//var alertList = document.querySelectorAll('.alert')
//alertList.forEach(function (alert) {
//  new bootstrap.Alert(alert)
//});

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))
const handle = (url,params) => {
  emit('innerLink',url,params)
}

function innerLink(e,url,params){
  e.preventDefault();
  handle(url,params)
}

function loginOut(e){
  e.preventDefault()
  Storage.clear()
  router.push({ path: '/login'});
}
</script>

<template>
  <header ref="appHeaderDom" class="app-header fixed-top">
    <div class="app-header-inner">
      <div class="container-fluid py-2">
        <div class="app-header-content">
          <div class="row justify-content-between align-items-center">
            <Color @resetSidePanel="resetSidePanel" :appSidepanelCss=appSidepanelCss
                   :searchCallBack="searchCallBack" ref="colorCallBack"/><!--//col-->
            <Search ref="searchCallBack" /><!--//app-search-box-->
            <div class="app-utilities col-auto">
<!--              <div class="app-utility-item app-notifications-dropdown dropdown">-->
<!--                <a class="dropdown-toggle no-toggle-arrow" id="notifications-dropdown-toggle"-->
<!--                   data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false" title="Notifications">-->
<!--                  &lt;!&ndash;//Bootstrap Icons: https://icons.getbootstrap.com/ &ndash;&gt;-->
<!--                  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bell icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">-->
<!--                    <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2z"/>-->
<!--                    <path fill-rule="evenodd" d="M8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"/>-->
<!--                  </svg>-->
<!--                  <span class="icon-badge">3</span>-->
<!--                </a>&lt;!&ndash;//dropdown-toggle&ndash;&gt;-->

<!--                <div class="dropdown-menu p-0" aria-labelledby="notifications-dropdown-toggle">-->
<!--                  <div class="dropdown-menu-header p-3">-->
<!--                    <h5 class="dropdown-menu-title mb-0">Notifications</h5>-->
<!--                  </div>&lt;!&ndash;//dropdown-menu-title&ndash;&gt;-->
<!--                  <div class="dropdown-menu-content">-->
<!--                    <div class="item p-3">-->
<!--                      <div class="row gx-2 justify-content-between align-items-center">-->
<!--                        <div class="col-auto">-->
<!--                          <img class="profile-image" src="../../assets/images/profiles/profile-1.png" alt="">-->
<!--                        </div>&lt;!&ndash;//col&ndash;&gt;-->
<!--                        <div class="col">-->
<!--                          <div class="info">-->
<!--                            <div class="desc">Amy shared a file with you. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>-->
<!--                            <div class="meta"> 2 hrs ago</div>-->
<!--                          </div>-->
<!--                        </div>&lt;!&ndash;//col&ndash;&gt;-->
<!--                      </div>&lt;!&ndash;//row&ndash;&gt;-->
<!--                      <a class="link-mask" href="notifications.html"></a>-->
<!--                    </div>&lt;!&ndash;//item&ndash;&gt;-->
<!--                    <div class="item p-3">-->
<!--                      <div class="row gx-2 justify-content-between align-items-center">-->
<!--                        <div class="col-auto">-->
<!--                          <div class="app-icon-holder">-->
<!--                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-receipt" fill="currentColor" xmlns="http://www.w3.org/2000/svg">-->
<!--                              <path fill-rule="evenodd" d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z"/>-->
<!--                              <path fill-rule="evenodd" d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z"/>-->
<!--                            </svg>-->
<!--                          </div>-->
<!--                        </div>&lt;!&ndash;//col&ndash;&gt;-->
<!--                        <div class="col">-->
<!--                          <div class="info">-->
<!--                            <div class="desc">You have a new invoice. Proin venenatis interdum est.</div>-->
<!--                            <div class="meta"> 1 day ago</div>-->
<!--                          </div>-->
<!--                        </div>&lt;!&ndash;//col&ndash;&gt;-->
<!--                      </div>&lt;!&ndash;//row&ndash;&gt;-->
<!--                      <a class="link-mask" href="notifications.html"></a>-->
<!--                    </div>&lt;!&ndash;//item&ndash;&gt;-->
<!--                    <div class="item p-3">-->
<!--                      <div class="row gx-2 justify-content-between align-items-center">-->
<!--                        <div class="col-auto">-->
<!--                          <div class="app-icon-holder icon-holder-mono">-->
<!--                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bar-chart-line" fill="currentColor" xmlns="http://www.w3.org/2000/svg">-->
<!--                              <path fill-rule="evenodd" d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-5 0v-3H2v3h2z"/>-->
<!--                            </svg>-->
<!--                          </div>-->
<!--                        </div>&lt;!&ndash;//col&ndash;&gt;-->
<!--                        <div class="col">-->
<!--                          <div class="info">-->
<!--                            <div class="desc">Your report is ready. Proin venenatis interdum est.</div>-->
<!--                            <div class="meta"> 3 days ago</div>-->
<!--                          </div>-->
<!--                        </div>&lt;!&ndash;//col&ndash;&gt;-->
<!--                      </div>&lt;!&ndash;//row&ndash;&gt;-->
<!--                      <a class="link-mask" href="notifications.html"></a>-->
<!--                    </div>&lt;!&ndash;//item&ndash;&gt;-->
<!--                    <div class="item p-3">-->
<!--                      <div class="row gx-2 justify-content-between align-items-center">-->
<!--                        <div class="col-auto">-->
<!--                          <img class="profile-image" src="../../assets/images/profiles/profile-2.png" alt="">-->
<!--                        </div>&lt;!&ndash;//col&ndash;&gt;-->
<!--                        <div class="col">-->
<!--                          <div class="info">-->
<!--                            <div class="desc">James sent you a new message.</div>-->
<!--                            <div class="meta"> 7 days ago</div>-->
<!--                          </div>-->
<!--                        </div>&lt;!&ndash;//col&ndash;&gt;-->
<!--                      </div>&lt;!&ndash;//row&ndash;&gt;-->
<!--                      <a class="link-mask" href="notifications.html"></a>-->
<!--                    </div>&lt;!&ndash;//item&ndash;&gt;-->
<!--                  </div>&lt;!&ndash;//dropdown-menu-content&ndash;&gt;-->

<!--                  <div class="dropdown-menu-footer p-2 text-center">-->
<!--                    <a href="notifications.html">View all</a>-->
<!--                  </div>-->

<!--                </div>&lt;!&ndash;//dropdown-menu&ndash;&gt;-->
<!--              </div>&lt;!&ndash;//app-utility-item&ndash;&gt;-->
<!--              <div class="app-utility-item">-->
<!--                <a href="settings.html" title="Settings">-->
<!--                  &lt;!&ndash;//Bootstrap Icons: https://icons.getbootstrap.com/ &ndash;&gt;-->
<!--                  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-gear icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">-->
<!--                    <path fill-rule="evenodd" d="M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 0 1 4.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 0 1-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 0 1 1.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 0 1 2.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 0 1 2.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 0 1 1.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 0 1-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 0 1 8.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 0 0 1.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 0 0 .52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 0 0-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 0 0-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 0 0-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 0 0-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 0 0 .52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 0 0 1.255-.52l.094-.319z"/>-->
<!--                    <path fill-rule="evenodd" d="M8 5.754a2.246 2.246 0 1 0 0 4.492 2.246 2.246 0 0 0 0-4.492zM4.754 8a3.246 3.246 0 1 1 6.492 0 3.246 3.246 0 0 1-6.492 0z"/>-->
<!--                  </svg>-->
<!--                </a>-->
<!--              </div>&lt;!&ndash;//app-utility-item&ndash;&gt;-->
              <div class="app-utility-item app-user-dropdown dropdown">
                <a class="dropdown-toggle" id="user-dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
                  <template v-if="photo">
                    <img :src="photo" alt="user profile">
                  </template>
                  <template v-else>
                    <img src="../../assets/images/own.png" alt="user profile">
                  </template>
                 </a>
                <ul class="dropdown-menu" aria-labelledby="user-dropdown-toggle">
                  <template v-if="menus">
                    <li v-for="menu in menus">
                      <a class="dropdown-item" href="#" @click="innerLink($event,menu.menuUrl)" >{{ menu.menuName }}</a>
                    </li>
                  </template>
                  <template v-else>
                    <li><a class="dropdown-item" href="#" @click="innerLink($event,'/home/account')" >账号</a></li>
                    <li><a class="dropdown-item" href="#" @click="innerLink($event,'/home/settings')" >设置</a></li>
                  </template>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#" @click="loginOut">登出</a></li>
                </ul>
              </div><!--//app-user-dropdown-->
            </div><!--//app-utilities-->
          </div><!--//row-->
        </div><!--//app-header-content-->
      </div><!--//container-fluid-->
    </div><!--//app-header-inner-->
    <div id="app-sidepanel" class="app-sidepanel" :class="appSidepanelCss">
      <div v-on:click="sidePanelDropClick" id="sidepanel-drop" class="sidepanel-drop"></div>
      <div class="sidepanel-inner d-flex flex-column">
        <a v-on:click="sidePanelCloseCilck" id="sidepanel-close" class="sidepanel-close d-xl-none">&times;</a>
        <Branding @innerLink="handle"/><!--//app-branding-->
        <Nav @innerLink="handle"/><!--//app-nav-->
        <Sidepanel @innerLink="handle"/><!--//app-sidepanel-footer-->
      </div><!--//sidepanel-inner-->
    </div><!--//app-sidepanel-->
  </header><!--//app-header-->
</template>

<style scoped>

</style>